<template>
  <view class="container">
    <!-- 表单 -->
    <view class="form-section">
      <view class="form-item">
        <text class="label">收货人</text>
        <input 
          type="text" 
          v-model="form.name" 
          placeholder="请输入收货人姓名"
        />
      </view>
      
      <view class="form-item">
        <text class="label">手机号码</text>
        <input 
          type="number" 
          v-model="form.phone" 
          placeholder="请输入手机号码"
          maxlength="11"
        />
      </view>
      
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker 
          mode="region" 
          :value="[form.province, form.city, form.district]"
          @change="handleRegionChange"
        >
          <view class="picker">
            <text v-if="form.province">{{form.province}}{{form.city}}{{form.district}}</text>
            <text v-else class="placeholder">请选择所在地区</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">详细地址</text>
        <textarea 
          v-model="form.detail" 
          placeholder="请输入详细地址"
          :maxlength="100"
          show-confirm-bar
        ></textarea>
      </view>
      
      <view class="form-item">
        <text class="label">设为默认地址</text>
        <switch :checked="form.isDefault" @change="toggleDefault" color="#ff0000" />
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @tap="handleSubmit">保存</button>
    </view>
  </view>
</template>

<script>
import { addressApi } from '@/api/index'
import { showToast } from '@/utils/common'

export default {
  data() {
    return {
      id: '',
      form: {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        detail: '',
        isDefault: false
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.getAddressDetail()
    }
  },
  methods: {
    // 获取地址详情
    async getAddressDetail() {
      try {
        const res = await addressApi.getAddressDetail(this.id)
        this.form = res
      } catch (error) {
        showToast('地址信息加载失败')
      }
    },
    
    // 处理地区选择
    handleRegionChange(e) {
      const [province, city, district] = e.detail.value
      this.form.province = province
      this.form.city = city
      this.form.district = district
    },
    
    // 切换默认地址
    toggleDefault(e) {
      this.form.isDefault = e.detail.value
    },
    
    // 表单验证
    validate() {
      if (!this.form.name.trim()) {
        showToast('请输入收货人姓名')
        return false
      }
      
      if (!this.form.phone.trim()) {
        showToast('请输入手机号码')
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        showToast('请输入正确的手机号码')
        return false
      }
      
      if (!this.form.province) {
        showToast('请选择所在地区')
        return false
      }
      
      if (!this.form.detail.trim()) {
        showToast('请输入详细地址')
        return false
      }
      
      return true
    },
    
    // 提交表单
    async handleSubmit() {
      if (!this.validate()) return
      
      try {
        if (this.id) {
          await addressApi.updateAddress({
            id: this.id,
            ...this.form
          })
        } else {
          await addressApi.addAddress(this.form)
        }
        
        showToast('保存成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        showToast('保存失败')
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.form-section {
  background: #fff;
  padding: 0 30rpx;
  
  .form-item {
    display: flex;
    align-items: flex-start;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      width: 160rpx;
      font-size: 28rpx;
      color: #333;
      padding-top: 6rpx;
    }
    
    input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .picker {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 28rpx;
        color: #333;
        
        &.placeholder {
          color: #999;
        }
        
        &.icon-arrow-right {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    textarea {
      flex: 1;
      height: 160rpx;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.submit-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #ff0000;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
  }
}
</style> 